<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Testing Sortables WITH Revert</title>
	<link rel="stylesheet" href="base.css" media="screen" />
	<script type="text/javascript" src="mootools.r684.js"></script>
	<script type="text/javascript">
	
		function vertical(){
			var list = $$('#content li div.collapse');
				var headings = $$('#content li h2');
				var collapsibles = new Array();
				headings.each( function(heading, i) {

					var collapsible = new Fx.Slide(list[i], { 
						duration: 500, 
						transition: Fx.Transitions.linear,
						onComplete: function(request){ 
							var open = request.getStyle('margin-top').toInt();
							//if(open >= 0) new Fx.Scroll(window).toElement(headings[i]);
						}
					});
					
					collapsibles[i] = collapsible;
					
					heading.onclick = function(){
						var span = $E('span', heading);
						span.setHTML('LOADING');
						if(span){
							var newHTML = span.innerHTML == '+' ? '-' : '+';
							span.setHTML(newHTML);
						}
						collapsible.toggle();
						return false;
					}
					
					//collapsible.hide();
					
				});
		}
	
	
		var mySortables; //use any of the commented techniques to select which lists are to be made sortable
		window.addEvent('domready', function(){
		
			mySortables = new Sortables(['c1', 'c2'], {
				cloneOpacity:.2,
				handle: 'dragHandle',
				clone: true,
				revert: true,
				onComplete:function(){
					var t = mySortables.serialize(2, function(element, index){
						return element.getProperty('id').replace('item_','') + '=' + index;
					}).join('&');
				//	alert(t);
				}
			});
			
			vertical();
			
		});
	</script>
</head>
<body>

	<div id="content">
		<ul id="c1">
			<li id="misc">
				<div class="dragHandle"> drag </div>
				<h2 >
				1. <a name="1" href="#1">Item 1</a>  
				<span id=1>+</span>
			</h2>
			<div  class="collapse">
				<div class="collapse-container">
					<p>bra bra bra </p>

				</div>
			</div>
			</li>
			<li id="news">
				<div class="dragHandle"> drag </div>
				<h2 >
				1. <a name="1" href="#1">Item 1</a>  
				<span id=2>+</span>
			</h2>
			<div  class="collapse">
				<div class="collapse-container">
					<p>bra bra bra </p>

				</div>
			</div>
				
			</li>
			<li id="search">
				<div class="dragHandle"> drag </div>
				<h2 >
				1. <a name="1" href="#1">Item 1</a>  
				<span id=3>+</span>
			</h2>
			<div  class="collapse">
				<div class="collapse-container">
					<p>bra bra bra </p>

				</div>
			</div>
			</li>
		</ul>

		<ul id="c2">
			<li id="weather">
				
				<h2 >
				1. <a name="1" href="#1">Item 1</a>  
				<span>+</span>
			</h2>
			<div  class="collapse">
				<div class="collapse-container">
					<p>bra bra bra </p>

				</div>
			</div>
			</li>
			<li id="yahoo">
				
			<h2 >
				1. <a name="1" href="#1">Item 1</a>  
				<span>+</span>
			</h2>
			<div  class="collapse">
				<div class="collapse-container">
					<p>bra bra bra </p>

				</div>
			</div>
			</li>
			<li id="quote">
				
			<h2 >
				1. <a name="1" href="#1">Item 1</a>  
				<span>+</span>
			</h2>
			<div  class="collapse">
				<div class="collapse-container">
					<p>bra bra bra </p>

				</div>
			</div>
			</li>
			
			<li id="quote2">
				
				<h2 >
				1. <a name="1" href="#1">Item 1</a>  
				<span>+</span>
			</h2>
			<div  class="collapse">
				<div class="collapse-container">
					<p>bra bra bra </p>

				</div>
			</div>
			</li>
			
			<li id="quote3">
				
				<h2>
				<div >
				1. <a name="1" href="#1">Item 1</a>
				</div>  
				<span>+</span>
			</h2>
			<div  class="collapse">
				<div class="collapse-container">
					<p>bra bra bra </p>

				</div>
			</div>
			</li>
		</ul>
		
	
	</div>

</body>
</html>